<template>
  <div class="prolistTable">
    <el-table
    :data="proinfo.list"
    border
    style="width: 100%">
      <el-table-column
        prop="good_id"
        label="商品名称"
        min-width="270">
        <template slot-scope="scope">
          <div class="proInfoBox">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.image"
              class="proImgInfo"
              :alt="scope.row.good_name"
              :preview-src-list="[scope.row.image]">
            </el-image>
            <div class="proInfo">
              <div class="proID">{{scope.row.good_number}}</div>
              <strong class="proName">{{scope.row.good_name}}</strong>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="opus_name_list"
        label="授权IP"
        min-width="195">
        <template slot-scope="scope">
          {{ssTring(scope.row.opus_name_list)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="account"
        label="授权方"
        min-width="183">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        min-width="75">
        <template slot-scope="scope">
          <div class="proStatus">{{checkStatus(scope.row.status)}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="segmentId"
        label="操作"
        min-width="175">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 0 || scope.row.status === 4" @click="editHandleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button v-if="scope.row.status === 2 || scope.row.status === 5" @click="shouquanHandleClick(scope.row)" type="text" size="small">申请码</el-button>
          <!-- <el-button @click="codeDetail(scope.row)" v-if="scope.row.status === 5" type="text" size="small">用码明细</el-button> -->
          <el-button :title="scope.row.good_id" @click="lookDetail(scope.row)" type="text" v-if="scope.row.status === 3 || scope.row.status === 4 || scope.row.status === 2 || scope.row.status === 5" size="small">详情</el-button>
          <el-button @click="delTableClick(scope.row)" v-if="scope.row.status === 0" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from '@/utils/request.js'
export default {
  name: 'ProlistTable',
  props: {
    proinfo: Object
  },
  data () {
    return {}
  },
  methods: {
    //  申请码
    shouquanHandleClick (row) {
      this.$router.push({path: '/getcode', query: {goodId: row.good_id}})
    },
    //  编辑
    editHandleClick (row) {
      window.location.href = process.env.NEW_ADD_PRO_URL + '/good/editMerchantGood.do?goodId=' + row.good_id
    },
    //  用码明细
    codeDetail (row) {
      //  console.log(row)
      this.$message({
        type: 'info',
        message: '该功能正在开发中，敬请期待！'
      })
    },
    //  去详情
    lookDetail (row) {
      this.$router.push('/prodetail/' + row.good_id)
      localStorage.setItem('prolistPagination', this.proinfo.pageNum)
    },
    delTableClick (row) {
      this.$confirm('确认要删除该条商品？', '删除', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'delLicenseWrapper'
      }).then(() => {
        request.delPro({
          params: {
            goodId: row.good_id
          }
        })
          .then((res) => {
            this.$parent.getProInfo(Number(localStorage.getItem('prolistPagination')), 10)
          })
          .catch((error) => {
            console.log(error)
          })
      }).catch(() => {})
    },
    //  处理状态
    checkStatus (p) {
      if (p === 0) {
        return '编辑中'
      } else if (p === 5) {
        return '用码中'
      } else if (p === 3) {
        return '待审核'
      } else if (p === 4) {
        return '审核退回'
      } else if (p === 2) {
        return '审核通过'
      } else {
        return '状态异常'
      }
    },
    ssTring (str) {
      if (!str) {
        return 'undefined'
      } else {
        let strs = []
        strs = str.split(',').filter(function (s) {
          //  注：IE9(不包含IE9)以下的版本没有trim()方法
          return s && s.trim()
        })
        let newStr = strs.join()
        let nstr
        if (newStr.indexOf('/1') !== -1) {
          nstr = newStr.replace(/\/1/g, '')
        }
        if (newStr.indexOf('/2') !== -1) {
          nstr = newStr.replace(/\/2/g, '')
        }
        return nstr
      }
    }
  }
}
</script>
<style lang="stylus">
@import '~styles/varibles.styl'
.delLicenseWrapper {
  width: 410px;
  height: 250px;
  border: 4px solid #fff;
  border-radius: 8px;
  margin: 0 auto;
  top: 50%;
}
.delLicenseWrapper .el-message-box__header {
  height: 45px;
  border-bottom: 1px solid #f2f2f2;
  background-color: #fff;
  padding: 0 10px 0 18px;
}
.delLicenseWrapper .el-message-box__header .el-message-box__title {
  line-height: 44px;
  color: #333333;
  font-size: 16px;
}
.delLicenseWrapper .el-message-box__header .el-message-box__headerbtn {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 0;
  border: none;
  outline: 0;
  background: 0 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.delLicenseWrapper .el-message-box__header .el-message-box__headerbtn .el-message-box__close {
  color: rgb(189, 189, 189);
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.delLicenseWrapper .el-message-box__content {
    position: relative;
    padding: 0;
}
.delLicenseWrapper .el-message-box__message p {
  padding-top: 12px;
  font-size: 16px;
  line-height: 106px;
  height: 118px;
  text-align: center;
}
.delLicenseWrapper .el-message-box__btns {
    padding: 0 71px;
    text-align: center;
    height: 40px;
}
.delLicenseWrapper .el-message-box__btns .el-button {
  width: 120px;
  height: 40px;
  padding: 0;
  text-align: center;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  color: #333333;
  font-size: 14px;
  float: right;
}
.delLicenseWrapper .el-button:focus,.delLicenseWrapper .el-button:hover {
    color: #333333;
    border-color: #E6E6E6;
    background-color: #fff;
}
.delLicenseWrapper .el-message-box__btns .el-button--primary {
    color: #FFF;
    background-color: $baseColor;
    border-color: $baseColor;
    float: left;
    margin-left: 0;
}
.lh-wrap .el-table {
  font-size: 14px;
  color: #333;
}
.lh-wrap .el-button--text {
  color: $baseColor;
}
.lh-wrap .el-button--text:focus, .lh-wrap .el-button--text:hover {
  color: $baseColor;
}
.prolistTable .el-table__header-wrapper thead.has-gutter tr th {
  background-color: #f5f6fa;
  color: #333333;
}
.prolistTable .el-table_1_column_4 {
  text-align: center;
}
.prolistTable .proImgInfo .el-image__error {
  font-size: 10px;
}
.prolistTable .el-button--mini, .prolistTable .el-button--small {
    font-size: 14px;
}
</style>
<style lang="stylus" scoped>
.proInfoBox
  height 60px
  width 100%
  .proImgInfo
    width 60px
    height 60px
    margin-right 5px
    float left
  .proInfo
    height 60px
    width 73.5%
    float left
    .proID
      height 16px
      line-height 16px
      width 100%
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      color #999999
      font-size 12px
    .proName
      height 44px
      line-height 20px
      padding 2px 0
      width 100%
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-box-orient vertical
      -webkit-line-clamp 2
      color #333333
      font-size 14px
      font-weight 400
.proStatus
  text-align center
</style>
